<template>
   <div class="">
    <h1>App.vue {爷爷级别}</h1>
    <label>
      <input v-model="colorVal" value="red" type="radio" name="color">
      红色
    </label>
    <label>
      <input v-model="colorVal" value="pink" type="radio" name="color">
      粉色
    </label>
    <label>
      <input v-model="colorVal" value="yellow" type="radio" name="color">
      黄色
    </label>
   </div>
   <div class="box">
    
   </div>
   <hr>
   <provideAVue></provideAVue>
</template>

<script setup lang='ts'>
import {ref ,readonly, provide} from 'vue'
import provideAVue from './components/provideAvue.vue'
 const colorVal = ref('red')
 provide('color', readonly(colorVal));
</script>

<style scoped>

</style>